<template>
  <a-modal :visible="visible" title="预览详细日志" width="1352px" :footer="null" @cancel="handleCancel">
    <a-tabs class="!-my-6" v-model:activeKey="state.activeKey">
      <a-tab-pane key="1" tab="文件生命周期">
        <DynamicTable :tables="dyTable" :config="dyTableConfig" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="操作记录">
        <DynamicTable :tables="dyOperateTable" :config="dyOperateTableConfig" />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { DynamicTable } from '@/components/public-template';
import indexService from './logDetail.service';
import { Api } from '@/config/api/fileLog';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    required: true,
    default: ''
  }
});
const emit = defineEmits(['update:visible']);
const state = reactive({
  activeKey: '1'
});

const dyTable: any = reactive(indexService.getTables());
const dyTableConfig: any = {
  queryUrl: Api.lifeCyclePage,
  protType: 'post',
  params: { id: props.id }
};
const dyOperateTable: any = reactive(indexService.getOperateTables());
const dyOperateTableConfig: any = {
  queryUrl: Api.optRecord,
  protType: 'post',
  params: { id: props.id }
};
function handleCancel() {
  state.activeKey = '1';
  emit('update:visible', false);
}
</script>

<style lang="less" scoped></style>
